<template>
    <!--导航区-->
    <div class="nav">
        <div class="nav-detail">
            <a href=""><img src="@/assets/book/images/girl.png" alt=""></a>
            <a href=""><span>女频</span></a>
        </div>
        <div class="nav-detail">
            <a href=""><img src="@/assets/book/images/man.png" alt=""></a>
            <a href=""><span>男频</span></a>
        </div>
        <div class="nav-detail">
            <a href=""><img src="@/assets/book/images/rank.png" alt=""></a>
            <a href=""><span>热书</span></a>
        </div>
        <div class="nav-detail">
            <a href=""><img src="@/assets/book/images/cate.png" alt=""></a>
            <a href=""><span>分类</span></a>
        </div>
    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
    .nav > .nav-detail > a:first-of-type > img{
        width: 2rem;
    }
    .nav{
        margin-top: 0.5rem;
        background-color: white;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        padding: 0.8rem 0;
    }
    .nav-detail {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }
</style>